/**
 * @name PostItem
 * @desc 首页-帖子
 */

import Taro from "@tarojs/taro"
import { View, Text, Image } from "@tarojs/components"
import { ImageGrid } from "@/components"
import { dateFormate } from "@/utils"

import "./styles.less"

const icoLike = require("@/assets/icons/like.png")
const icoLikeO = require("@/assets/icons/like-o.png")
const icoStar = require("@/assets/icons/star.png")
const icoStarO = require("@/assets/icons/star-o.png")
const icoInfo = require("@/assets/icons/info.png")
const icoPlay = require("@/assets/icons/play.png")

class PostItem extends Taro.Component {
    static defaultProps = {
        data: {
            id: "",
            user: { id: "", name: "", avatar: "" },
            date: 0,
            images: null,
            film: null,
            desc: "",
            likeUsers: []
        }
    }

    onToDetail(id) {
        console.log("id", id)
        Taro.navigateTo({
            url: "/pages/PostDetail/index?id=" + id
        })
    }

    onImageClick(index) {
        const current = this.props.data.images[index].path
        const urls = this.props.data.images.map(v => v.path)
        Taro.previewImage({ current, urls })
    }

    render() {
        const { id, user, date, images, film, desc } = this.props.data

        return (
            <View className="post-item">
                <View className="post-item__top">
                    <Image src={user.avatar} className="post-item__user-avatar" mode="aspectFill" />
                    <View className="post-item__info">
                        <Text className="post-item__user-name">{user.name}</Text>
                        <Text className="post-item__date">{dateFormate(date, "yyy-mmm-ddd hh:mm:ss")}</Text>
                    </View>

                    <Text className="post-item__folowing-button">Folowing</Text>
                </View>

                <View className="post-item__desc" onClick={this.onToDetail.bind(this, id)}>
                    <Text className="post-item__desc-article">{desc}</Text>
                </View>

                {images && <ImageGrid images={images} onImageClick={this.onImageClick} />}

                {film && (
                    <View className="post-item__film-wrapper">
                        <Video
                            className="post-item__film"
                            src={film.path}
                            controls={true}
                            poster={icoPlay}
                            initialTime="0"
                            id={film.id}
                        />
                    </View>
                )}

                <View className="post-item__bottom-bar">
                    <View className="post-item__bottom-button has-border">
                        <Image className="post-item__bottom-ico" src={icoStarO} mode="aspectFill" />
                        <Text className="post-item__bottom-text">{102}</Text>
                    </View>
                    <View className="post-item__bottom-button has-border" onClick={this.onToDetail.bind(this, id)}>
                        <Image className="post-item__bottom-ico" src={icoInfo} mode="aspectFill" />
                        <Text className="post-item__bottom-text">{102}</Text>
                    </View>
                    <View className="post-item__bottom-button">
                        <Image className="post-item__bottom-ico" src={icoLikeO} mode="aspectFill" />
                        <Text className="post-item__bottom-text">{0}</Text>
                    </View>
                </View>
            </View>
        )
    }
}

export { PostItem }
